<html>
<style>
body {
	font-family: Verdana;
	font-size: 10px;
}
#content{
	width: 600px;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #666;
	padding: 10px;
	-webkit-box-shadow: 0px 0px 20px #666
}
#title{
	background-color: #666;
	color: #FFF;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 10px;
}
.rouge{
	color: #FFF;
	background-color: #FF0000;
	width: 100px;
	padding: 5px;
}
#status{
	width: 150px;
}
</style>
<head><title>Guitar Maker Options</title></head>
<link type="text/css" href="css/eggplant/jquery-ui-1.8rc3.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8rc3.custom.min.js"></script>
<script type="text/javascript">

// Saves options to localStorage.
function save_options() {
  var select = document.getElementById("precision");
  var precision = select.children[select.selectedIndex].value;
  localStorage["decimalPrecision"] = precision;
  
  var diapas = document.getElementById("diapas").value;
  localStorage["scaleLength"] = diapas;
  
  var select = document.getElementById("nbreFret");
  var nbreFret = select.children[select.selectedIndex].value;
  localStorage["nbreFret"] = nbreFret;
  
  var cordier_max = document.getElementById("cordier_max").value;
  localStorage["cordier_max"] = cordier_max;
  
  var cordier_min = document.getElementById("cordier_min").value;
  localStorage["cordier_min"] = cordier_min;
  
  var fingerNA = document.getElementById("fingerNA").value;
  localStorage["fingerNA"] = fingerNA;
  
  // Update status to let user know options were saved.
  $(".ui-widget").css('visibility','visible');
  setTimeout(function() {
	$(".ui-widget").css('visibility','hidden');
  }, 750);
}

// Restores select box state to saved value from localStorage.
function restore_options() {
  $(".ui-widget").css('visibility','hidden');
  var precision = localStorage["decimalPrecision"];
  if (!precision) {
    return;
  }
  var select = document.getElementById("precision");
  for (var i = 0; i < select.children.length; i++) {
    var child = select.children[i];
    if (child.value == precision) {
      child.selected = "true";
      break;
    }
  }
  
  var diapas = localStorage["scaleLength"];
  $("#diapas").val(diapas);
  
  var nbreFret = localStorage["nbreFret"];
  if (!nbreFret) {
    return;
  }
  var select = document.getElementById("nbreFret");
  for (var i = 0; i < select.children.length; i++) {
    var child = select.children[i];
    if (child.value == nbreFret) {
      child.selected = "true";
      break;
    }
  }
  
  var cordier_max = localStorage["cordier_max"];
  $("#cordier_max").val(cordier_max);
  
  var cordier_min = localStorage["cordier_min"];
  $("#cordier_min").val(cordier_min);
  
  var fingerNA = localStorage["fingerNA"];
  $("#fingerNA").val(fingerNA);
}

</script>

<body onload="restore_options()">
<div id="content">
	<div id="title">Guitar Maker Options</div>
	Mesure precision (decimal) : 
	<select id="precision">
		<option value="1">0</option>
		<option value="10">1</option>
		<option value="100">2</option>
		<option value="1000" selected>3</option>
		<option value="10000">4</option>
		<option value="100000">5</option>
		<option value="1000000">6</option>
		<option value="10000000">7</option>
		<option value="100000000">8</option>
		<option value="1000000000">9</option>
		<option value="10000000000">10</option>
	</select>
	<br/><br/>
	<hr/>
	<br/>
	Scale length (mm) :
	<input id="diapas" value="635"></input>
	<br/>
	Number of frets : 
		<select id="nbreFret">
			<option value="22" selected>22 frets</option>
			<option value="24">24 frets</option>
		</select>
	<br/>
	Maximum tailpiece height (mm) :
	<input id="cordier_max" value="17"></input>
	<br/>
	Minimum tailpiece height (mm) :
	<input id="cordier_min" value="13"></input>
	<br/>
	Fingerboard height (mm) :
	<input id="fingerNA" value="5"></input>
	<br/>
	<br/><br/>
	<button onclick="save_options()">Save options</button><br/><br/>
	<div id="status" class="ui-widget">
		<div class="ui-state-highlight ui-corner-all" style="padding: 0 .7em;"> 
			<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>Options Saved.</p>
		</div>	
	</div>
</div>
</body>
</html>